<template>
  <div class="exBox">
    <router-link to="/leaflets1" class="topImgBox">
      <span class="topImgText1">面部护理</span>
      <div class="topImgText2Box">
        <span class="topImgText2">查看全部</span>
        <img class="topImgText2Img" src="@/assets/zfc-img/扩展箭头.png" alt="" />
      </div>
    </router-link>
    <div class="flBPlBoxImgBox">
      <a
        href="###"
        class="flBPlBoxImgItem"
        v-for="(v, k) in flPInfoArr"
        :key="k + '品类'"
      >
        <img class="flBPlBoxImgItemImg" :src="v.imgUrl" alt="" />
        <span class="flBPlBoxImgItemText">{{ v.text }}</span>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "FlTabContent2",
  data() {
    return {
      flPInfoArr: [
        {
          imgUrl: require("@/assets/zfc-img/plImg/洁面护理.png"),
          text: "洁面护理",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/人气口红.png"),
          text: "人气口红",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/名牌包包.png"),
          text: "名牌包包",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/洁面护理.png"),
          text: "洁面护理",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/人气口红.png"),
          text: "人气口红",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/名牌包包.png"),
          text: "名牌包包",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/洁面护理.png"),
          text: "洁面护理",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/人气口红.png"),
          text: "人气口红",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/名牌包包.png"),
          text: "名牌包包",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/洁面护理.png"),
          text: "洁面护理",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/人气口红.png"),
          text: "人气口红",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/名牌包包.png"),
          text: "名牌包包",
          falg: false,
        },
      ],
    };
  },
  // components: {FLTabClass},
};
</script>

<style scoped>
.exBox {
  width: 100%;
}
.topImgBox {
  display: block;
  width: 5rem;
  height: 2rem;
  margin: 0 auto;
  margin-top: 0.17rem;
  margin-bottom: 0.45rem;
  background: url("../../../../../assets/zfc-img/宣传栏/宣传栏1.png");
  position: relative;
}
.topImgText1 {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.3rem;
  color: #333333;
  position: absolute;
  top: 0.58rem;
  left: 0.7rem;
}
.topImgText2Box {
  width: 1.2rem;
  height: 0.3rem;
  border: 0.01rem solid #887979;
  background-color: #ffffff;
  box-shadow: 0.05rem 0.03rem 0 #c6adad;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 1.17rem;
  left: 0.68rem;
}
.topImgText2 {
  line-height: 0.18rem;
  font-size: 0.18rem;
  color: #333333;
}
.topImgText2Img {
  width: 0.08rem;
  height: 0.14rem;
  margin-left: 0.09rem;
}

.flBPlBoxImgBox {
  width: 100%;
  height: calc(1.8rem * 4);
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.56rem;
}
.flBPlBoxImgItem {
  width: calc(100% / 3);
  height: 1.8rem;
  position: relative;
}
.flBPlBoxImgItemImg {
  display: block;
  margin: 0 auto;
}
.flBPlBoxImgItemText {
  width: 100%;
  height: 0.24rem;
  font-size: 0.24rem;
  line-height: 0.24rem;
  color: #4c4c4c;
  display: block;
  text-align: center;
  position: absolute;
  bottom: 0.37rem;
  left: 0;
}
</style>
